<template>
    <div class="exam-container">
      <h1 class="exam-title">数学试卷</h1>
      
      <!-- <div class="student-info">
        <div>
          <span>班级：<input v-model="studentInfo.class"></span>
          <span>姓名：<input v-model="studentInfo.name"></span>
        </div>
        <div>
          <span>学号：<input v-model="studentInfo.id"></span>
        </div>
      </div> -->
  
      <!-- 选择题部分 -->
      <div class="section">
        <h2>一、选择题（每题5分，共50分）</h2>
        <div class="question" v-for="(question, index) in choiceQuestions" :key="'choice'+index">
          <p>{{ index + 1 }}. {{ question.content }}</p>
          <div class="options">
            <label v-for="(option, oIndex) in question.options" :key="oIndex">
              <input type="radio" :name="'q'+question.id" :value="option.value" 
                     v-model="answers[question.id]" :disabled="showAnswers">
              {{ option.label }}
            </label>
          </div>
          <div v-if="showAnswers" class="answer-analysis">
            <p><strong>正确答案：{{ question.answer }}</strong></p>
            <p v-if="question.analysis"><strong>解析：</strong>{{ question.analysis }}</p>
            <p><strong>得分：{{ getQuestionScore(question.id) }} / 5</strong></p>
          </div>
        </div>
      </div>
  
      <!-- 填空题部分 -->
      <div class="section">
        <h2>二、填空题（每题4分，共20分）</h2>
        <div class="question" v-for="(question, index) in fillInQuestions" :key="'fill'+index">
          <p>{{ index + 11 }}. {{ question.content }}</p>
          <input type="text" v-model="answers[question.id]" class="fill-input" :disabled="showAnswers">
          <div v-if="showAnswers" class="answer-analysis">
            <p><strong>正确答案：{{ question.answer }}</strong></p>
            <p v-if="question.analysis"><strong>解析：</strong>{{ question.analysis }}</p>
            <p><strong>得分：{{ getQuestionScore(question.id) }} / 4</strong></p>
          </div>
        </div>
      </div>
  
      <!-- 判断题部分 -->
      <div class="section">
        <h2>三、判断题（每题2分，共10分）</h2>
        <div class="question" v-for="(question, index) in trueFalseQuestions" :key="'tf'+index">
          <p>{{ index + 16 }}. {{ question.content }}</p>
          <div class="options">
            <label>
              <input type="radio" :name="'tf'+question.id" value="T" 
                     v-model="answers[question.id]" :disabled="showAnswers">
              正确
            </label>
            <label>
              <input type="radio" :name="'tf'+question.id" value="F" 
                     v-model="answers[question.id]" :disabled="showAnswers">
              错误
            </label>
          </div>
          <div v-if="showAnswers" class="answer-analysis">
            <p><strong>正确答案：{{ question.answer === 'T' ? '正确' : '错误' }}</strong></p>
            <p v-if="question.analysis"><strong>解析：</strong>{{ question.analysis }}</p>
            <p><strong>得分：{{ getQuestionScore(question.id) }} / 2</strong></p>
          </div>
        </div>
      </div>
  
      <!-- 简答题部分 -->
      <div class="section">
        <h2>四、简答题（每题10分，共30分）</h2>
        <div class="question" v-for="(question, index) in shortAnswerQuestions" :key="'short'+index">
          <p>{{ index + 21 }}. {{ question.content }}</p>
          <textarea v-model="answers[question.id]" rows="5" :disabled="showAnswers"></textarea>
          <div v-if="showAnswers" class="answer-analysis">
            <p><strong>参考答案：{{ question.answer }}</strong></p>
            <p v-if="question.analysis"><strong>解析：</strong>{{ question.analysis }}</p>
            <p><strong>得分：{{ getQuestionScore(question.id) }} / 10</strong></p>
          </div>
        </div>
      </div>
  
      <div class="exam-footer">
        <button @click="resetExam" class="reset-btn" v-if="showAnswers">重做</button>
        <button @click="submitExam" :disabled="isSubmitting" class="submit-btn" v-else>
          <span v-if="!isSubmitting">提交试卷</span>
          <span v-else class="loading">
            <span class="loading-dot">.</span>
            <span class="loading-dot">.</span>
            <span class="loading-dot">.</span>
            正在批改
          </span>
        </button>
      </div>
  
      <div class="score-display" v-if="showScore">
        <h3>考试成绩</h3>
        <p>总分：{{ totalScore }} / 110</p>
        <div class="score-details">
          <p>选择题：{{ sectionScores.choice }} / 50</p>
          <p>填空题：{{ sectionScores.fillIn }} / 20</p>
          <p>判断题：{{ sectionScores.trueFalse }} / 10</p>
          <p>简答题：{{ sectionScores.shortAnswer }} / 30</p>
        </div>
        <button @click="showScore = false" class="close-btn">关闭</button>
      </div>
  
      <!-- <div class="notes">
        <h3>注意事项：</h3>
        <ol>
          <li>请在规定时间内完成试卷</li>
          <li>保持卷面整洁</li>
          <li>简答题请简明扼要回答</li>
        </ol>
      </div> -->
    </div>
  </template>
  
  <script lang="ts">
  import { ElLoading } from 'element-plus';
import { defineComponent, reactive, ref } from 'vue';
  
  interface Question {
    id: number;
    content: string;
    type: 'choice' | 'fill-in' | 'true-false' | 'short-answer';
    options?: { label: string; value: string }[];
    answer?: string;
    analysis?: string;
    score?: number;
  }
  
  interface StudentInfo {
    class: string;
    name: string;
    id: string;
  }
  
  interface SectionScores {
    choice: number;
    fillIn: number;
    trueFalse: number;
    shortAnswer: number;
  }
  
  export default defineComponent({
    name: 'ExamPaper',
    setup() {
      const questions: Question[] = [
        // 选择题 (10题)
        { 
          id: 1, 
          content: '一个三角形的三个内角分别是45°、45°、90°，这个三角形是什么类型的三角形？', 
          type: 'choice', 
          options: [
            { label: 'A. 等边三角形', value: 'A' },
            { label: 'B. 等腰直角三角形', value: 'B' },
            { label: 'C. 钝角三角形', value: 'C' },
            { label: 'D. 锐角三角形', value: 'D' }
          ],
          answer: 'B',
          analysis: '因为有两个45°角相等，且有一个90°角，所以是等腰直角三角形。'
        },
        { 
          id: 2, 
          content: '下列哪个数是质数？', 
          type: 'choice',
          options: [
            { label: 'A. 1', value: 'A' },
            { label: 'B. 4', value: 'B' },
            { label: 'C. 7', value: 'C' },
            { label: 'D. 9', value: 'D' }
          ],
          answer: 'C',
          analysis: '质数是指大于1的自然数，除了1和它本身外没有其他约数。7是质数。'
        },
        { 
          id: 3, 
          content: '圆的周长公式是？', 
          type: 'choice',
          options: [
            { label: 'A. πr²', value: 'A' },
            { label: 'B. 2πr', value: 'B' },
            { label: 'C. 4/3πr³', value: 'C' },
            { label: 'D. πd²', value: 'D' }
          ],
          answer: 'B',
          analysis: '圆的周长公式是2πr，其中r是半径。'
        },
        { 
          id: 4, 
          content: '一次函数y=2x+3的斜率是？', 
          type: 'choice',
          options: [
            { label: 'A. 2', value: 'A' },
            { label: 'B. 3', value: 'B' },
            { label: 'C. -2', value: 'C' },
            { label: 'D. -3', value: 'D' }
          ],
          answer: 'A',
          analysis: '一次函数y=kx+b中，k代表斜率。这里k=2。'
        },
        { 
          id: 5, 
          content: '下列哪个是二元一次方程？', 
          type: 'choice',
          options: [
            { label: 'A. x² + y = 5', value: 'A' },
            { label: 'B. 2x + 3y = 7', value: 'B' },
            { label: 'C. y = x³', value: 'C' },
            { label: 'D. xy = 6', value: 'D' }
          ],
          answer: 'B',
          analysis: '二元一次方程是指含有两个未知数且最高次数为1的方程。'
        },
        { 
          id: 6, 
          content: '正方形的对角线长度为10cm，则其面积是？', 
          type: 'choice',
          options: [
            { label: 'A. 25cm²', value: 'A' },
            { label: 'B. 50cm²', value: 'B' },
            { label: 'C. 75cm²', value: 'C' },
            { label: 'D. 100cm²', value: 'D' }
          ],
          answer: 'B',
          analysis: '正方形对角线d与边长a的关系是d=a√2，面积a²=d²/2=100/2=50cm²。'
        },
        { 
          id: 7, 
          content: '下列哪个是勾股数？', 
          type: 'choice',
          options: [
            { label: 'A. 3, 4, 5', value: 'A' },
            { label: 'B. 5, 6, 7', value: 'B' },
            { label: 'C. 7, 8, 9', value: 'C' },
            { label: 'D. 9, 10, 11', value: 'D' }
          ],
          answer: 'A',
          analysis: '勾股数是指满足a²+b²=c²的三个正整数，3²+4²=5²。'
        },
        { 
          id: 8, 
          content: '一元二次方程x²-5x+6=0的解是？', 
          type: 'choice',
          options: [
            { label: 'A. 1和6', value: 'A' },
            { label: 'B. 2和3', value: 'B' },
            { label: 'C. -2和-3', value: 'C' },
            { label: 'D. 0和5', value: 'D' }
          ],
          answer: 'B',
          analysis: '因式分解得(x-2)(x-3)=0，所以x=2或x=3。'
        },
        { 
          id: 9, 
          content: '下列哪个图形既是轴对称又是中心对称？', 
          type: 'choice',
          options: [
            { label: 'A. 等腰三角形', value: 'A' },
            { label: 'B. 平行四边形', value: 'B' },
            { label: 'C. 正方形', value: 'C' },
            { label: 'D. 梯形', value: 'D' }
          ],
          answer: 'C',
          analysis: '正方形有4条对称轴和对称中心。'
        },
        { 
          id: 10, 
          content: '若a:b=2:3，b:c=4:5，则a:c=?', 
          type: 'choice',
          options: [
            { label: 'A. 8:15', value: 'A' },
            { label: 'B. 6:5', value: 'B' },
            { label: 'C. 5:8', value: 'C' },
            { label: 'D. 15:8', value: 'D' }
          ],
          answer: 'A',
          analysis: '统一b的比例，a:b=8:12，b:c=12:15，所以a:c=8:15。'
        },
        
        // 填空题 (5题)
        { 
          id: 11, 
          content: '已知圆的直径是14cm，它的周长是____cm。（π≈3.14）', 
          type: 'fill-in', 
          answer: '43.96',
          analysis: '周长=πd=3.14×14=43.96cm'
        },
        { 
          id: 12, 
          content: '棱长为5cm的正方体的体积是____cm³。', 
          type: 'fill-in', 
          answer: '125',
          analysis: '正方体体积=棱长³=5³=125cm³'
        },
        { 
          id: 13, 
          content: '一元二次方程x²-9=0的解是x=____和x=____。', 
          type: 'fill-in', 
          answer: '3,-3',
          analysis: 'x²=9 ⇒ x=3或x=-3'
        },
        { 
          id: 14, 
          content: '30°角的补角是____度。', 
          type: 'fill-in', 
          answer: '150',
          analysis: '补角=180°-30°=150°'
        },
        { 
          id: 15, 
          content: '将分数3/4化为小数是____。', 
          type: 'fill-in', 
          answer: '0.75',
          analysis: '3÷4=0.75'
        },
        
        // 判断题 (5题)
        { 
          id: 16, 
          content: '所有偶数都是合数。', 
          type: 'true-false', 
          answer: 'F',
          analysis: '2是偶数但也是质数，不是合数。'
        },
        { 
          id: 17, 
          content: '两个相似三角形的面积比等于它们对应边长的平方比。', 
          type: 'true-false', 
          answer: 'T',
          analysis: '相似三角形的面积比确实等于相似比的平方。'
        },
        { 
          id: 18, 
          content: '平行四边形的对角线相等。', 
          type: 'true-false', 
          answer: 'F',
          analysis: '只有矩形和正方形的平行四边形对角线才相等。'
        },
        { 
          id: 19, 
          content: '圆的切线垂直于半径。', 
          type: 'true-false', 
          answer: 'T',
          analysis: '圆的切线在切点处垂直于半径。'
        },
        { 
          id: 20, 
          content: '1是最小的质数。', 
          type: 'true-false', 
          answer: 'F',
          analysis: '1不是质数，最小的质数是2。'
        },
        
        // 简答题 (3题)
        { 
          id: 21, 
          content: '列举矩形的三个主要性质。', 
          type: 'short-answer', 
          answer: '1. 四个角都是直角 2. 对边平行且相等 3. 对角线相等且互相平分',
          analysis: '矩形是特殊的平行四边形，具有平行四边形的所有性质，还有自己的特殊性质。'
        },
        { 
          id: 22, 
          content: '写出平行四边形面积的计算公式，并简要说明推导过程。', 
          type: 'short-answer', 
          answer: '面积公式：底×高。推导：平行四边形可以分割重组为长方形，面积等于底乘以高。',
          analysis: '通过将平行四边形的一边切割并移动到另一边，可以将其转化为长方形，从而推导出面积公式。'
        },
        { 
          id: 23, 
          content: '简述勾股定理的内容，并给出一个应用实例。', 
          type: 'short-answer', 
          answer: '勾股定理：直角三角形两直角边平方和等于斜边平方。应用：测量不可直接测量的距离，如测量河宽。',
          analysis: '勾股定理是几何学中非常重要的定理，广泛应用于建筑、测量等领域。'
        }
      ];
  
      const studentInfo = reactive<StudentInfo>({
        class: '',
        name: '',
        id: ''
      });
  
      const answers = reactive<Record<number, string>>({});
      const isSubmitting = ref(false);
      const showScore = ref(false);
      const showAnswers = ref(false);
      const totalScore = ref(0);
      const sectionScores = reactive<SectionScores>({
        choice: 0,
        fillIn: 0,
        trueFalse: 0,
        shortAnswer: 0
      });
  
      // 初始化每题得分
      questions.forEach(q => {
        q.score = 0;
      });
  
      const choiceQuestions = questions.filter(q => q.type === 'choice');
      const fillInQuestions = questions.filter(q => q.type === 'fill-in');
      const trueFalseQuestions = questions.filter(q => q.type === 'true-false');
      const shortAnswerQuestions = questions.filter(q => q.type === 'short-answer');
  
      const submitExam = () => {
        if (isSubmitting.value) return;
        
        isSubmitting.value = true;
        const loadingDialog = ElLoading.service({
          lock: true,
          text: 'AI 正在批改中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        // 模拟批改过程
        setTimeout(() => {
          calculateScore();
          loadingDialog.close();
          isSubmitting.value = false;
          showScore.value = true;
          showAnswers.value = true;
        }, 3000);
      };
  
      const calculateScore = () => {
        // 重置分数
        totalScore.value = 0;
        sectionScores.choice = 0;
        sectionScores.fillIn = 0;
        sectionScores.trueFalse = 0;
        sectionScores.shortAnswer = 0;
  
        // 批改选择题 (每题5分)
        choiceQuestions.forEach(q => {
          q.score = 0;
          if (answers[q.id] === q.answer) {
            q.score = 5;
            sectionScores.choice += 5;
          }
        });
  
        // 批改填空题 (每题4分)
        fillInQuestions.forEach(q => {
          q.score = 0;
          if (answers[q.id]?.toString().trim().toLowerCase() === q.answer?.toString().toLowerCase()) {
            q.score = 4;
            sectionScores.fillIn += 4;
          }
        });
  
        // 批改判断题 (每题2分)
        trueFalseQuestions.forEach(q => {
          q.score = 0;
          if (answers[q.id] === q.answer) {
            q.score = 2;
            sectionScores.trueFalse += 2;
          }
        });
  
        // 批改简答题 (每题10分)
        shortAnswerQuestions.forEach(q => {
          q.score = 0;
          if (answers[q.id]?.trim().length > 20) { // 根据回答长度给分
            q.score = 10;
          } else if (answers[q.id]?.trim().length > 10) {
            q.score = 5;
          }
          sectionScores.shortAnswer += q.score;
        });
  
        // 计算总分
        totalScore.value = sectionScores.choice + sectionScores.fillIn + 
                           sectionScores.trueFalse + sectionScores.shortAnswer;
      };
  
      const getQuestionScore = (id: number) => {
        const question = questions.find(q => q.id === id);
        return question?.score || 0;
      };
  
      const resetExam = () => {
        // 清空所有答案
        Object.keys(answers).forEach(key => {
          answers[parseInt(key)] = '';
        });
        showAnswers.value = false;
        showScore.value = false;
        totalScore.value = 0;
        sectionScores.choice = 0;
        sectionScores.fillIn = 0;
        sectionScores.trueFalse = 0;
        sectionScores.shortAnswer = 0;
      };
  
      return {
        questions,
        choiceQuestions,
        fillInQuestions,
        trueFalseQuestions,
        shortAnswerQuestions,
        studentInfo,
        answers,
        isSubmitting,
        showScore,
        showAnswers,
        totalScore,
        sectionScores,
        submitExam,
        resetExam,
        getQuestionScore
      };
    }
  });
  </script>
  
  <style scoped>
  .exam-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'SimSun', serif;
    background-color: #fff;
    border: 1px solid #ddd;
    position: relative;
  }
  
  .exam-title {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .student-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  .student-info input {
    border: none;
    border-bottom: 1px solid #000;
    width: 100px;
    text-align: center;
    margin: 0 10px;
  }
  
  .section {
    margin-bottom: 30px;
  }
  
  .question {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
  }
  
  .options {
    margin-left: 20px;
  }
  
  .options label {
    display: block;
    margin: 5px 0;
  }
  
  .fill-input {
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: 10px;
  }
  
  textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 10px;
  }
  
  .exam-footer {
    text-align: center;
    margin: 30px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  
  .submit-btn {
    padding: 10px 30px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .reset-btn {
    padding: 10px 30px;
    background-color: #f39c12;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .submit-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
  
  .loading {
    display: inline-flex;
    align-items: center;
  }
  
  .loading-dot {
    animation: blink 1.4s infinite both;
    margin: 0 2px;
  }
  
  .loading-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .loading-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes blink {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
  }
  
  .score-display {
    position: fixed;
    top: 50%;
    right: 220px;
    transform: translateY(-50%);
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 100;
    max-width: 250px;
  }
  
  .score-display h3 {
    margin-top: 0;
    color: #4CAF50;
    text-align: center;
  }
  
  .score-details {
    margin: 15px 0;
  }
  
  .score-details p {
    margin: 5px 0;
  }
  
  .close-btn {
    display: block;
    margin: 10px auto 0;
    padding: 5px 15px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .notes {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 30px;
  }
  
  .notes ol {
    padding-left: 20px;
  }
  
  .answer-analysis {
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-left: 4px solid #4CAF50;
    border-radius: 0 4px 4px 0;
  }
  
  .answer-analysis p {
    margin: 5px 0;
  }
  
  input:disabled, textarea:disabled {
    background-color: #f5f5f5;
    color: #333;
  }
  </style>